<template>
<div id="home" style="background: rgb(4, 11, 58);height:100%;">
  <el-row style="border:1px solid blue">
    <el-col :span="18" >
      <div class="grid-content bg-purple">GIS数据大屏管理平台</div>
    </el-col>
    <el-col :span="6" >
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row  style="border: 1px solid red">
    <el-col :span="7" style="border:1px solid blue;">
      <div class="grid-content bg-purple">
        <!-- 柱状图 -->
        <div id="histogram1" style="height: 200px;width:100%"></div>
      </div>
      </el-col>
    <el-col :span="10">
      <div class="grid-content bg-purple"></div>
      </el-col>
    <el-col :span="7">
      <div class="grid-content bg-purple">
         <!-- 柱状图 -->
         <div id="histogram2" style="height: 200px; width: 100%;"></div>
      </div>
    </el-col>
  </el-row>
</div>


</template>

<script>
export default{
    name: 'HomeView',
    data(){
      return{
        myChartOne:null,
        myChartTwo:null,
        // 指定图表的配置项和数据
        option : {
          title: {
            text: '月销量'
          },
          // 提示框
          tooltip: {},
          // 图例
          legend: {
            data: ['销量']
          },
          // 表示x轴坐标
          xAxis: {
            data: ['oppo', 'vivo', 'iphone', '小米', '三星', '魅族']
          },        
          yAxis: {},  // 表示y轴坐标
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [3500, 2200, 4500, 6500, 200, 3000]
            }
          ]
        },
      }
    },
    mounted() {
      this.initCharts()
    },
    methods:{
      // 柱状图
      initCharts(){
        let that = this
        // 基于准备好的dom，初始化echarts实例
        that.myChartOne = that.$echarts.init(document.getElementById('histogram1'));       
        that.myChartOne.setOption(that.option);
        // 基于准备好的dom，初始化echarts实例
        that.myChartTwo = that.$echarts.init(document.getElementById('histogram2'));       
        that.myChartTwo.setOption(that.option);
      },
    },
}

</script>
<style  scoped>
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 30px;
    padding: 0px;
    overflow: hidden;
}
</style>